﻿body, html, ul, li, a, img, div
{
	padding: 0;
	margin: 0;
}

@wrapper-size: 600px;
@book-top: 200px;
@book-left: 230px;
@book-img-w: 140px;
@book-img-h: 200px;
@angle: 26deg;

.rotate(@step)
{
	@real-angle: (@angle * @step);
	-webkit-transform: rotate(@real-angle);
	-moz-transform: rotate(@real-angle);
	-ms-transform: rotate(@real-angle);
	-o-transform: rotate(@real-angle);
	transform: rotate(@real-angle);
}

.put-at-center()
{
	position: absolute;
	height: @book-img-h + 2px;
	width: @book-img-w + 2px;
	top: 50%;
	left: 50%;
	margin-top: -1 * @book-img-h / 2;
	margin-left: -1 * @book-img-w / 2;
}

.a-box-shadow(@p)
{
	-webkit-box-shadow: @p @p @p rgba(0,0,0,0.2);
	box-shadow: @p @p @p rgba(0,0,0,0.2);
}

.a-backgraund()
{
	@from: 1;
	@to: 0.0;
	background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: -o-radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	background-image: radial-gradient(circle cover, rgba(255,255,255,@from), rgba(255,255,255,@to) 100%);
	opacity: 0.9;
	.a-box-shadow(5px);
}

@rectangle: 240px;
@ch-li-left: -50px;
@ch-li-top: -20px;

.li-ch-first-line()
{
	border: 3px solid lighten(#5FA32C, 30%);
}

.li-ch-second-line()
{
	border: none;
}

.a-ch-first-line()
{
	top: -90px;
	left: -90px;
}

.a-ch-second-line()
{
	top: -170px;
	left: -170px;
}

body
{
	font-size: 18px;
	font-family: "trebuchet ms", helvetica, sans-serif;
	letter-spacing: -1px;

	a
	{
		text-decoration: none;
		color: black;
	}

	div.wrapper
	{
		.put-at-center;

		ul.radial
		{
			z-index: 100;
			list-style-type: none;
			position: relative;

			& > li > a
			{
				/*book anchor*/
				border: 1px solid black;
				display: block;
				width: @book-img-w;
				height: @book-img-h;
				background: #ddd;
				border-radius: 5px;
				overflow: hidden;
				text-align: center;
				.a-box-shadow(15px);
			}

			ul
			{
				/*chapters list*/
				z-index: -1;
				list-style-type: none;
				position: absolute;
				left: 0;
				top: 0;
				width: @book-img-w;
				height: @book-img-h;

				li
				{
					/*chapters items*/
					position: absolute;
					width: @rectangle;
					height: @rectangle;
					left: @ch-li-left;
					top: @ch-li-top;

					a
					{
						/*chapters anchor*/
						position: absolute;
						display: block;
						width: 110px;
						height: 50px;
						padding-top: 27px;
						border-radius: 50px;
						color: #000;
						background: #ddd;
						text-align: center;
						.a-backgraund;
					}

					&:nth-child(1)
					{
						.li-ch-first-line;
						.rotate(0);

						a
						{
							.a-ch-first-line;
							color: #738694;
							font-style: italic;
							.rotate(0);
						}
					}

					&:nth-child(2)
					{
						.li-ch-first-line;
						.rotate(1);

						a
						{
							.a-ch-first-line;
							.rotate(-1);
						}
					}

					&:nth-child(3)
					{
						.li-ch-first-line;
						.rotate(2);

						a
						{
							.a-ch-first-line;
							.rotate(-2);
						}
					}

					&:nth-child(4)
					{
						.li-ch-first-line;
						.rotate(3);

						a
						{
							.a-ch-first-line;
							.rotate(-3);
						}
					}

					&:nth-child(5)
					{
						.li-ch-first-line;
						.rotate(4);

						a
						{
							.a-ch-first-line;
							.rotate(-4);
						}
					}

					&:nth-child(6)
					{
						.li-ch-first-line;
						.rotate(5);

						a
						{
							.a-ch-first-line;
							.rotate(-5);
						}
					}

					&:nth-child(7)
					{
						.li-ch-first-line;
						.rotate(6);

						a
						{
							.a-ch-first-line;
							.rotate(-6);
						}
					}

					&:nth-child(8)
					{
						.li-ch-first-line;
						.rotate(7);

						a
						{
							.a-ch-first-line;
							.rotate(-7);
						}
					}

					&:nth-child(9)
					{
						.li-ch-first-line;
						.rotate(8);

						a
						{
							.a-ch-first-line;
							.rotate(-8);
						}
					}

					&:nth-child(10)
					{
						.li-ch-first-line;
						.rotate(9);

						a
						{
							.a-ch-first-line;
							.rotate(-9);
						}
					}

					&:nth-child(11)
					{
						.li-ch-first-line;
						.rotate(10);

						a
						{
							.a-ch-first-line;
							.rotate(-10);
						}
					}

					&:nth-child(12)
					{
						.li-ch-first-line;
						.rotate(11);

						a
						{
							.a-ch-first-line;
							.rotate(-11);
						}
					}

					&:nth-child(13)
					{
						.li-ch-first-line;
						.rotate(12);

						a
						{
							.a-ch-first-line;
							.rotate(-12);
						}
					}

					&:nth-child(14)
					{
						.li-ch-first-line;
						.rotate(13);

						a
						{
							.a-ch-first-line;
							.rotate(-13);
						}
					}
					/* SECOND LINE */
					&:nth-child(15)
					{
						.li-ch-second-line;
						.rotate(0);

						a
						{
							.a-ch-second-line;
							.rotate(0);
						}
					}

					&:nth-child(16)
					{
						.li-ch-second-line;
						.rotate(1);

						a
						{
							.a-ch-second-line;
							.rotate(-1);
						}
					}

					&:nth-child(17)
					{
						.li-ch-second-line;
						.rotate(2);

						a
						{
							.a-ch-second-line;
							.rotate(-2);
						}
					}

					&:nth-child(18)
					{
						.li-ch-second-line;
						.rotate(3);

						a
						{
							.a-ch-second-line;
							.rotate(-3);
						}
					}

					&:nth-child(19)
					{
						.li-ch-second-line;
						.rotate(4);

						a
						{
							.a-ch-second-line;
							.rotate(-4);
						}
					}

					&:nth-child(20)
					{
						.li-ch-second-line;
						.rotate(5);

						a
						{
							.a-ch-second-line;
							.rotate(-5);
						}
					}

					&:nth-child(21)
					{
						.li-ch-second-line;
						.rotate(6);

						a
						{
							.a-ch-second-line;
							.rotate(-6);
						}
					}

					&:nth-child(22)
					{
						.li-ch-second-line;
						.rotate(7);

						a
						{
							.a-ch-second-line;
							.rotate(-7);
						}
					}

					&:nth-child(23)
					{
						.li-ch-second-line;
						.rotate(8);

						a
						{
							.a-ch-second-line;
							.rotate(-8);
						}
					}

					&:nth-child(24)
					{
						.li-ch-second-line;
						.rotate(9);

						a
						{
							.a-ch-second-line;
							.rotate(-9);
						}
					}

					&:nth-child(25)
					{
						.li-ch-second-line;
						.rotate(10);

						a
						{
							.a-ch-second-line;
							.rotate(-10);
						}
					}

					&:nth-child(26)
					{
						.li-ch-second-line;
						.rotate(11);

						a
						{
							.a-ch-second-line;
							.rotate(-11);
						}
					}

					&:nth-child(27)
					{
						.li-ch-second-line;
						.rotate(12);

						a
						{
							.a-ch-second-line;
							.rotate(-12);
						}
					}

					&:nth-child(28)
					{
						.li-ch-second-line;
						.rotate(13);

						a
						{
							.a-ch-second-line;
							color: #738694;
							font-style: italic;
							.rotate(-13);
						}
					}
				}
			}
		}
	}
}
